<template>
    <!-- 视图部分 -->
    <div class="main">
        <van-list v-model="loading" :finished="finished" finished-text="——————————我是有底线的——————————" @load="onLoad">
            <!-- 展示正在热映列表 -->
            <van-card v-for="item in list" :key="item.filmId">
                <!-- 电影描述：主演、时长、国籍等信息 -->
                <template #desc>
                    <div class="desc">
                        <div>
                            观众评分：<span class="grade">{{ item.grade }}</span>
                        </div>
                        <div>主演：{{ item.actors | parseActors }}</div>
                        <div>{{ item.nation }} | {{ item.runtime }}分钟</div>
                    </div>
                </template>
                <!-- 电影名称 -->
                <template #title>
                    <div class="title">{{ item.name }}</div>
                </template>
                <!-- 电影缩略图 -->
                <template #thumb>
                    <img :src="item.poster" width="66" />
                </template>
                <!-- 购票按钮 -->
                <template #tags>
                    <van-tag plain class="buyTicket" size="large" type="danger">购票</van-tag>
                </template>
            </van-card>
        </van-list>
    </div>
</template>

<script>
// 引入vant的组件
import Vue from "vue";
import { Card, Tag, List } from "vant";
Vue.use(Card);
Vue.use(Tag);
Vue.use(List);

// 导入地址模块
import uri from "@/config/uri";
export default {
    data() {
        return {
            // 默认的页码
            pageNum: 1,
            // 电影列表
            list: [],
            // 确定加载状态的，是否处于加载中。在每次加载完毕后需要设置为false
            loading: false,
            // 确定是否全部请求完毕的，当所有的数据全部获取到后，需要将该值设置为true
            finished: false,
        };
    },
    methods: {
        // 触发数据加载的
        // 请注意，该onLoad方法并不是首次先加载created周期中的，后续再使用onLonad的，而是每次都会使用onLoad
        onLoad() {
            this.$http.get(uri.getNowPlaying + "?pageNum=" + this.pageNum).then((ret) => {
                // 获取下最大的页码
                let maxPageNum = Math.ceil(ret.data.total / 10);
                // console.log(maxPageNum);
                // console.log(ret);
                // 将原先的数据与现在本次的数据做合并
                this.list = [...this.list,...ret.data.films];
                // 本次请求已经完成
                this.loading = false;
                if (this.pageNum < maxPageNum) {
                    // 页码+1
                    this.pageNum++;
                } else {
                    // 说明已经全部加载完毕了
                    this.finished = true;
                }
            });
        },
    },
    // created发送请求
    // created() {
    //     this.$http.get(uri.getNowPlaying + "?pageNum=" + this.pageNum).then((ret) => {
    //         // console.log(ret);
    //         this.list = ret.data.films;
    //     });
    // },
    // 过滤器
    // 作用：处理数据格式
    filters: {
        // 解析主演
        parseActors(actors) {
            let str = "";
            // 动画片可能没有演职人员
            if (actors) {
                actors.forEach((el) => {
                    str += el.name + " ";
                });
            } else {
                str = "暂无主演";
            }
            // 注意长度的截取
            return str.length > 17 ? str.substr(0, 17) + "..." : str;
        },
    },
};
</script>

<style scoped>
/* 样式部分 */
/* 解决图片自带的圆角 */
.van-card__thumb img {
    border-radius: 0px;
}
/* 重写图片右侧的边距 */
.van-card__thumb {
    width: 70px;
}
/* 电影名称 */
.title {
    font-size: 16px;
}
/* 描述样式 */
.desc {
    font-size: 13px;
    color: #797d82;
}
/* 评分 */
.grade {
    color: orange;
}
/* 购票按钮 */
.buyTicket {
    position: relative;
    float: right;
    top: -35px;
}
/* 防止最后一个被挡住 */
.main {
    margin-bottom: 50px;
}
</style>
